<script setup>
import Card from '@/components/Card.vue'
import { onMounted, ref, watch } from 'vue'

import NavBar from '@/components/NavBar.vue'
import { useRouter } from 'vue-router'
import { useRoute } from 'vue-router'
import { userQuestionListService } from '@/api/question/index.js'
const questionList = ref()

const currentPage = ref()
const totalPages = ref()
const active = ref('默认')
const router = useRouter()
const route = useRoute()
onMounted(async () => {
  const response = await userQuestionListService('1', '6', '默认', null, 1)
  questionList.value = response.data.data.records
})
async function onSwitchPage(page) {
  currentPage.value = page
  let response
  if (route.query.type) {
    response = await userQuestionListService(page, '6', active.value, null, 1)
  } else {
    response = await userQuestionListService(page, '6', '默认', null, 1)
  }
  questionList.value = response.data.data.records
  router.push(
    `/question-list?page=${currentPage.value}&pageSize=6&type=${active.value}`
  )
}
async function onClickTab() {
  router.push(`/question-list?page=1&pageSize=6&type=${active.value}`) //同一组件并不会重新渲染
  const response = await userQuestionListService(
    '1',
    '6',
    active.value,
    null,
    1
  )
  questionList.value = response.data.data.records
  totalPages.value = response.data.data.pages
  currentPage.value = 1
}
</script>
<template>
  <NavBar name="看需求"></NavBar>
  <van-tabs v-model:active="active" @click-tab="onClickTab">
    <van-tab title="默认" name="默认"></van-tab>
    <van-tab title="热门知识" name="热门知识"></van-tab>
    <van-tab title="营业" name="营业"></van-tab>
    <van-tab title="装维" name="装维"></van-tab>
    <van-tab title="政企客户经理" name="政企客户经理"></van-tab>
    <van-tab title="客经专员" name="客经专员"></van-tab>
    <van-tab title="支局长" name="支局长"></van-tab>
    <van-tab title="片区长" name="片区长"></van-tab>
    <van-tab title="VIP客户经理" name="VIP客户经理"></van-tab>
  </van-tabs>
  <Card
    class="card"
    v-for="object in questionList"
    :object="object"
    type="需求"
    :key="index"
  ></Card>
  <van-pagination
    v-model="currentPage"
    :page-count="totalPages"
    @change="onSwitchPage"
    :show-page-size="5"
    force-ellipses
    class="page"
  />
</template>
<style scoped>
.container {
  display: flex;
  flex-direction: column;
  border: 1px solid #ddd; /* 添加边框 */
  margin-bottom: 2rem; /* 在垂直方向上设置间距 */
  padding: 10px; /* 可选：为卡片内容添加一些内边距 */
  border-radius: 5px; /* 可选：给边框添加圆角 */
}
.card {
  margin: 0.75rem; /* 12px */
  margin-bottom: 0.5rem; /* 8px */
}
.page {
  margin-bottom: 2rem;
}
</style>
